<template>

  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="1100px" :close-on-click-modal="false" destroy-on-close
    @opened="$refs['billDetailGridpanelEl'].loadData()" custom-class="dialog_auto"
  >
    <el-form ref="formEl"   label-width="120px" class="common-form-panel-div"
             style="padding: 0px 10px; margin-top: 10px; ">

      <ex-table-auto class="el-table-nowwarp" ref="billDetailGridpanelEl"
                     :url="'/fms-api/customer/CustomerBillDetailRpc/select.json'"
                     :urlParams="{fmsOrderId:chooseRowId}"
                     height="500"
                     :autoFill="false"
                     :autoLoad="false"
                     autoPage
                     border>
        <el-table-column type="index" label="#" width="43"></el-table-column>

        <el-table-column prop="serviceName" :label="$tt('费用信息')" min-width="14">
          <template slot-scope="scope">
            <div style=" white-space: nowrap; text-overflow: ellipsis; overflow: hidden; ">
              费用名称: {{ scope.row.serviceName }}
            </div>
            <div style=" white-space: nowrap; text-overflow: ellipsis; overflow: hidden; ">
              费用金额: {{ scope.row.serviceAmount }}
            </div>
            <div v-if="scope.row.productType=='EXPRESS'">
              单号: {{ scope.row.productType=='EXPRESS' ? scope.row.refSubOrderNo : scope.row.refOrderNo }}
            </div>
          </template>

        </el-table-column>

        <el-table-column prop="actualAmount" :label="$tt('计算参数')" min-width="24" align="center">
          <template slot-scope="scope">
            <bill_detail_info :row="scope.row"></bill_detail_info>
          </template>
        </el-table-column>


        <el-table-column prop="happenTime" :label="$tt('label_fms_account_log_create_time')" min-width="12" align="center">
          <template slot-scope="scope">
            {{ $dateFormat(scope.row.happenTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$tt('label_fms_account_apply_status')" min-width="8" align="center">
          <template slot-scope="scope">
            {{ $enumShow(scope.row.status, 'FmsBillDetailStatus') }}
          </template>
        </el-table-column>

      </ex-table-auto>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">{{ $tt('label_close') }}</el-button>
    </div>
  </el-dialog>

</template>
<script>

  import bill_detail_info from '@/component/fms/bill_detail_info.vue'

  export default {

    components: {  bill_detail_info  } ,


    data() {
      return {
        chooseRowId: '-1',
        dialogFormVisible: false,

        dialogTitle: ''
      }
    },
    created() {
      var _this = this

    },

    watch: {
      value: function (val, old) {
      }
    },

    destroyed() {

    },

    computed: {},

    updated() {
    },

    methods: {
      showDetail(row){

        this.dialogTitle = '[结算单] ' + this.$enumShow(row.refOrderType, 'OrderTypeEnum') + ' - '+ row.refOrderNo
        this.chooseRowId = row.id
        this.dialogFormVisible = true

      }
    },
    props: {

      fmsOrderId: {
        type: String,
        default: '-1'
      },

      value: null

    }



  }

</script>
